<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Translate Rectangle</title>
  </head>
  <body>
    <canvas
      id="cavsElem1"
      width="400"
      height="400"
      style="border: 1px solid #000000"
    ></canvas>
    <!-- <canvas id="cavsElem2" width="800" height="800" style="border: 1px solid rebeccapurple;"></canvas> -->
    <img id="myImage" src="./test.png" alt="">
    <script>
      /**
       * canvas.toDataURL(type, 1) 方法返回一个包含图片展示的 data URI
       *   参数 type 指定图片的格式，如 image/png 或 image/jpeg
       *   参数 1 表示图片的质量，取值范围为 0.0 - 1.0，默认值为 0.92
       * data URI 是一种将小文件直接嵌入文档的技术
       * data URI 的形式如下：data:[][;base64],<data>
       * 
      */
      var canvas1 = document.querySelector('#cavsElem1');
      let ctx = canvas1.getContext('2d');
      // var canvas2 = document.querySelector('#cavsElem2');
      // var ctx1 = canvas1.getContext('2d');
      // var ctx2 = canvas2.getContext('2d');
      // ctx1.fillRect(20, 20, 40, 40);      //在第一个画布上绘制矩形
      /**
       * 画布渲染画布
       * ctx.drawImage(image, dx, dy, dWidth, dHeight)
       * 其中image也可以是一个画布
      */
      // ctx2.drawImage(canvas1, 10, 10);    //将第一个画布整体绘制到第二个画布上
      let dataURL = canvas1.toDataURL('image/jpeg', 0.8);
      document.getElementById('myImage').src = dataURL;
      let img = new Image();
      img.src = dataURL;
      img.onload = function() {
        ctx.drawImage(img, 0, 0, 200, 150);
      }
    </script>
  </body>
</html>
